<template>
    <ul style="padding: 12px 0">
        <Item v-for="(item, index) in menuTree" :key="index" :menuKeys="menuKeys" :item="item" :selectItem="selectItem" :layer="layer1" @clickEvent="clickEvent"></Item>
    </ul>
</template>
<script>
    import Item from './item.vue';

    export default {
        name: 'menuTree',
        props: [
            'menuTree',
            'menuKeys',
            'selectItem'
        ],
        components: {
            Item
        },
        data: function () {
        	return {
                layer1: 0
            }
        },
        methods: {
            clickEvent: function (id){
                this.$emit('selectEvent',id);
            }
        }
    }
</script>
<style scoped>
ul {
    margin: 0;
    list-style-type: none;
}
</style>